<template>
  <div class="animated fadeIn">
    <b-row>
      <b-col sm="12">
        <b-card class="card-accent-primary">
          <div slot="header">
            <i class="icon-user"></i>
            <strong>个人信息</strong>
          </div>
          <div class="card-body">
            <Form label-position="left" :label-width="80" :model="formItems" ref="formValidate" :rules="ruleValidate">
              <div class="col-sm-6">
                <formItem label="用户名:">
                  <i-input type="text" disabled v-model="formItems.name"></i-input>
                </formItem>
                <formItem label="联系方式:" prop="mp">
                  <i-input type="text" v-model="formItems.mp"></i-input>
                </formItem>
                <formItem label="用户头像:">
                  <div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index">
                    <template v-if="item.status === 'finished'">
                      <img :src="item.url">
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                      </div>
                    </template>
                    <template v-else>
                      <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                    </template>
                  </div>
                  <Upload
                    v-show="uploadList.length < 1"
                    ref="upload"
                    :default-file-list="defaultList"
                    :headers="headers"
                    :show-upload-list="false"
                    :on-success="handleSuccess"
                    :format="['jpg','jpeg','png']"
                    :max-size="2048"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    type="drag"
                    action="/api/common/fileupliad/"
                    style="display: inline-block;width:58px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                      <Icon type="camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <Modal title="图片预览" v-model="visible">
                    <img :src="formItems.headpic" v-if="visible" style="width: 100%">
                  </Modal>
                </formItem>
                <form-item>
                  <i-button v-show="buttonShow(5)" type="primary" @click="handleSubmit('formValidate')" style="margin-right: 8px">提交</i-button>

                  <i-button type="ghost"  @click="$router.go(-1)" >返回</i-button>
                </form-item>
              </div>
            </Form>
          </div>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>
<script>
import Mixin from 'common/js/mixin'
export default {
  name: 'Userinfo',
  data () {
    return {
      formItems: {
        name: '',
        headpic: '',
        mp: ''
      },
      ruleValidate: {
        mp: [
          {required: true, message: '请填写手机号', trigger: 'blur'}
        ]
      },
      visible: false,
      uploadList: [],
      defaultList: [
        {
          'url': ''
        }
      ],
      headers: {
        'authkey': JSON.parse(localStorage.getItem('user_info')).auth_key
      },
      userId: JSON.parse(localStorage.getItem('user_info')).user_id
    }
  },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
  },
  methods: {
    getEdit () {
      this.$get('/api/user/user/' + this.userId).then((res) => {
        if (res) {
          this.formItems.name = res.data.user_name
          this.formItems.headpic = res.data.user_headpic
          this.formItems.mp = res.data.user_mp
          this.defaultList[0].url = res.data.user_headpic
        }
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$put('/api/user/user/', this.userId, this.formItems).then((res) => {
            if (res) {
              this.$Message.success({
                content: res.mess,
                closable: () => {
                  this.router.go(0)
                }
              })
            }
          })
        }
      })
    },
    handleView (name) {
      this.visible = true
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (res, file) {
      if (res.state === 0) {
        file.url = res.data.imgurl
        this.formItems.headpic = res.data.imgurl
      } else {
        this.$Message.error({
          content: res.mess
        })
      }
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    }
  },
  created () {
    this.getEdit()
  },
  mixins: [Mixin]
}
</script>
